<template>
  <div class="my-application search-list-container searchHeight">
    <approval-form :processDefinitionId="detail.processDefinitionId" :isShowSubmitBtn="true"
      @submitFormData="submitFormData" v-if="isShowForm"></approval-form>
    <approve-detail :type="this.detail.status == 1 ? 3 : this.detail.status == 3 ? 3 : 1" :detail="detail"
      v-else-if="isShowDetail" @handleCancelDetail="handleCancelDetail"
      @submitFormData="submitFormData"></approve-detail>
    <template v-else>
      <div class="search-wrapper">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="auto">
          <el-form-item label="审批状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流程名称" prop="definitionName">
            <el-input v-model="queryParams.definitionName" placeholder="请输入流程名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="发起时间">
            <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form>
      </div>
      <div class="list-wrapper">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">发起申请</el-button>
          </el-col>
        </el-row>
        <el-table ref="tables" width="100%" height="100%" v-loading="loading" :data="instanceList">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="审批状态" align="center" prop="statusToString" />
          <el-table-column label="流程名称" align="center" prop="processDefinitionName" :show-overflow-tooltip="true" />
          <el-table-column label="流程描述" align="center" prop="name" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="发起时间" align="center" prop="startDate" show-overflow-tooltip />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row, scope.index)"
                v-hasPermi="['monitor:operlog:query']">详情</el-button>
              <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row, scope.index)"
                v-hasPermi="['base:fuseSmart:remove']" v-if="scope.row.status == 4">删除
              </el-button>
              <el-button size="mini" type="text" icon="el-icon-refresh-right" @click="handleRevoke(scope.row)"
                v-hasPermi="['share:shareApplyLog:audit']"
                v-if="scope.row.status == 1 || scope.row.status == 3">撤回</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getMyInstanceList" />
      </div>
    </template>
    <select-process :showDialog.sync="showDialog" @goForm="goForm"></select-process>
  </div>
</template>

<script>
import SelectProcess from "./selectProcess";
import ApprovalForm from "./approvalForm";
import ApproveDetail from "./approveDetail";
import {
  startProInstance,
  getMyInstanceList,
  cancelProcess,
  deleteProInstances,
} from "@/api/internalApproval/myApplication.js";
export default {
  data() {
    return {
      dateRange: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      showDialog: false,
      isShowForm: false,
      instanceList: [
        {
          operId: "",
        },
      ],
      loading: false,
      processDefinitionId: "",
      detail: {},
      total: 0,
      isShowDetail: false,
      statusList: [
        {
          value: "1",
          label: "待审批",
        },
        {
          value: "2",
          label: "审批中",
        },
        {
          value: "5",
          label: "已通过",
        },
        {
          value: "3",
          label: "已驳回",
        },
        {
          value: "4",
          label: "已撤回",
        },
      ],
    };
  },
  components: {
    SelectProcess,
    ApprovalForm,
    ApproveDetail,
  },
  methods: {
    // 删除流程实例
    async handleDelete(row) {
      const result = await deleteProInstances({
        instanceId: row.id,
      });
      this.$message({
        type: "success",
        message: result.meta.message,
      });
      this.getMyInstanceList();
    },
    // 撤回流程实例
    async handleRevoke(row) {
      const result = await cancelProcess({
        instanceId: row.id,
      });
      this.$message({
        type: "success",
        message: result.meta.message,
      });
      this.getMyInstanceList();
    },
    // 获取表单数据提交值
    submitFormData(formData, formDetail, fileUrlList) {
      this.isShowForm = false;
      if (formData) {
        this.detail.formVersionId = formDetail
          ? formDetail.vId
          : this.detail.formVersionId;
        this.startInstance(formData, fileUrlList);
      }
    },
    // 启动实例并提交表单内容
    async startInstance(formData = "", fileUrlList) {
      this.loading = true;
      const result = await startProInstance({
        definitionId: this.detail.processDefinitionId,
        instanceName: "",
        description: "",
        formDataStr: formData,
        formType: this.detail.formType ? this.detail.formType : 1,
        formVersionId: this.detail.formVersionId,
        version: String(this.detail.version),
        file: fileUrlList
      });
      this.$message({
        type: "success",
        message: result.meta.message,
      });
      this.isShowDialog = false;
      this.getMyInstanceList();
    },
    goForm(detail) {
      this.detail = detail;
      this.isShowForm = true;
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startTime = this.dateRange ? this.dateRange[0] : "";
      this.queryParams.endTime = this.dateRange ? this.dateRange[1] : "";
      this.getMyInstanceList();
    },
    resetQuery() {
      this.dateRange = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleView(row) {
      this.detail = row;
      this.isShowDetail = true;
    },
    handleCancelDetail(row) {
      if (row) {
        this.handleRevoke(row);
      }
      this.isShowDetail = false;
      this.getMyInstanceList();
    },
    handleAdd() {
      this.showDialog = true;
    },
    // 获取我发起的流程列表
    async getMyInstanceList() {
      this.loading = true;
      const result = await getMyInstanceList({
        ...this.queryParams,
      });
      this.loading = false;
      this.instanceList = result.data.list;
      this.total = result.data.total;

      if (this.$route.query.id) {
        this.detail = this.instanceList.filter(item => item.id === this.$route.query.id)[0]
        this.$nextTick(() => {
          this.isShowDetail = true;
        });
      }
    },
  },
  mounted() {
    this.getMyInstanceList();
    // 首页流程申请跳转判断
    if (this.$route.query.detail) {
      this.detail = this.$route.query.detail;
      this.$nextTick(() => {
        this.isShowForm = true;
      });
    }

  },
};
</script>

<style lang="scss" scoped>
.my-application {}

.searchHeight {
  height: calc(100% - 54px) !important;
}
</style>